import {
    getPlanStatistics
} from '../../api/long-insure'
import uCharts from '../../../utils/u-charts'
var uChartsInstance = {}
Page({
    data: {
        tabList: [{
            title: '工种'
        },
        {
            title: '被派遣单位'
        }
        ],
        total1: 0,
        total2: 0,
        tab: 0,
        type: null,
        isShow: false,
        tab1: [],
        tab2: [],
        tabmaxnum1: 0,
        tabmaxnum2: 0,
        isShow: false
    },
    static: {
        id: null,
        statisticsData: null,
    },
    onLoad(options) {
        this.static.id = options.id

    },
    onReady() {
        this.getData()
    },
    async getData() {
        this.data.total1 = 0
        this.data.total2 = 0
        this.static.statisticsData = await getPlanStatistics({
            companyPlanId: this.static.id,
            policyStatus: this.data.type ? 1 : ''
        })
        console.log(this.static.statisticsData, 'usguhguhs')
        this.setData({
            tab1: this.static.statisticsData.occupationGroup,
            tab2: this.static.statisticsData.serveCompanyGroup,
        })
        let maxnum1 = 0
        let maxnum2 = 0
        if (this.static.statisticsData.occupationGroup.length !== 0) {
            this.static.statisticsData.occupationGroup.forEach((ele, i) => {
                this.data.total1 += ele.count
                if (maxnum1 < ele.count) {
                    maxnum1 = ele.count
                }
            })
        }
        if (this.static.statisticsData.serveCompanyGroup.length !== 0) {
            this.static.statisticsData.serveCompanyGroup.forEach((ele, i) => {
                this.data.total2 += ele.count
                if (maxnum2 < ele.count) {
                    maxnum2 = ele.count
                }
            })
        }
        this.setData({
            total1: this.data.total1,
            total2: this.data.total2,
            tabmaxnum1: maxnum1,
            tabmaxnum2: maxnum2
        })

        this.onDraw()
    },
    onTab(event) {
        this.setData({
            tab: event.currentTarget.dataset.i
        })
        this.onDraw()
    },
    onDraw() {
        const chartData = {
            categories: [],
            series: []
        }
        if (Number(this.data.tab) === 0) {
            this.static.statisticsData.occupationGroup.forEach(item => {
                chartData.categories.push(item.occupationName)
                chartData.series.push({
                    name: item.occupationName,
                    data: item.count,
                    formatter(val) {
                        return `人数：${item.count}`
                    }
                })
            })
        } else {
            this.static.statisticsData.serveCompanyGroup.forEach(item => {
                chartData.categories.push(item.serveCompanyName)
                chartData.series.push({
                    name: item.serveCompanyName,
                    data: item.count,
                    formatter(val) {
                        return `人数：${item.count}`
                    }
                })
            })
        }
        this.setData({
            isShow: this.static.statisticsData.occupationGroup.length === 0 && this.static.statisticsData.serveCompanyGroup.length === 0 ? true : false
        })
        this.drawCharts('long-insure-statistics', chartData, 800, 700)
    },
    drawCharts(id, data, width, height) {
        const pixelRatio = wx.getSystemInfoSync().pixelRatio
        const cWidth = (width / 750 * wx.getSystemInfoSync().windowWidth - 50) * pixelRatio
        const cHeight = (height / 750 * wx.getSystemInfoSync().windowWidth) * pixelRatio

        const query = wx.createSelectorQuery().in(this)
        query.select('#' + id).fields({
            node: true,
            size: true
        }).exec(res => {
            if (res[0]) {
                const canvas = res[0].node
                const ctx = canvas.getContext('2d')
                canvas.width = res[0].width * pixelRatio
                canvas.height = res[0].height * pixelRatio
                uChartsInstance[id] = new uCharts({
                    type: 'ring',
                    animation: true,
                    canvas2d: true,
                    categories: data.categories,
                    color: ['#00D679', '#2EA1FF', '#FFB12D'],
                    context: ctx,
                    height: cHeight,
                    pixelRatio: pixelRatio,
                    series: data.series,
                    width: cWidth,
                    dataLabel: true,
                    legend: {
                        lineHeight: 24
                    },
                    extra: {
                        ring: {
                            ringWidth: 20,
                            centerColor: '#FFFFFF',
                            activeOpacity: 0.5,
                            activeRadius: 10,
                            customRadius: 0,
                            labelWidth: 15,
                            border: true,
                            borderWidth: 3,
                            borderColor: '#FFFFFF',
                            linearType: 'none'
                        }
                    }
                })
            } else {
                console.error('[uCharts]: 未获取到 context')
            }
        })
    },
    tap(e) {
        uChartsInstance[e.target.id].touchLegend(e)
        uChartsInstance[e.target.id].showToolTip(e)
    },
    onType(event) {
        this.setData({
            type: Number(event.detail.value)
        })
        this.getData()
    }
})